<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/common/taglibs.jsp" %>

<div class="page">

    <div class="pageContent">
        <div layouth="111">
            <script type="text/javascript" charset="utf-8">
                /* Title settings */
                title = "热门菜品分析(top5)";
                titleXpos = 690;
                titleYpos = 85;

                /* Pie Data */
                pieRadius = 130;
                pieXpos = 500;
                pieYpos = 180;
                pieData = [];
                pieLegend = [];

                pieLegendPos = "east";

                $(function () {
                    var r = Raphael("chartHolder2");

                    var url = "${ctx}/statistic/statistic!top5foodData.action";

                    $.get(url, function (result) {
                        var obj = JSON.parse(result);

                        var names = [];
                        var counts = [];

                        if (obj.length > 0) {
                            for (var i = 0; i < obj.length; i++) {
                                names.push("%%.%% – " + obj[i].foodName);
                                counts.push(obj[i].num);
                            }
                            pieData = counts;
                            pieLegend = names;


                            r.text(titleXpos, titleYpos, title).attr({"font-size": 20});

                            var pie = r.piechart(pieXpos, pieYpos, pieRadius, pieData, {
                                legend: pieLegend,
                                legendpos: pieLegendPos
                            });
                            pie.hover(function () {
                                this.sector.stop();
                                this.sector.scale(1.1, 1.1, this.cx, this.cy);
                                if (this.label) {
                                    this.label[0].stop();
                                    this.label[0].attr({r: 7.5});
                                    this.label[1].attr({"font-weight": 800});
                                }
                            }, function () {
                                this.sector.animate({transform: 's1 1 ' + this.cx + ' ' + this.cy}, 500, "bounce");
                                if (this.label) {
                                    this.label[0].animate({r: 5}, 500, "bounce");
                                    this.label[1].attr({"font-weight": 400});
                                }
                            });

                        }

                    });


                });
            </script>

            <div id="chartHolder2"></div>

            <script type="text/javascript">

                var options = {
                    stacked: false,
                    gutter: 20,
                    axis: "0 0 1 1", // Where to put the labels (trbl)
                    axisystep: 10 // How many x interval labels to render (axisystep does the same for the y axis)
                };

                $(function () {


                    var url = "${ctx}/statistic/statistic!xseData.action";


                    $.get(url, function (result) {
                        var obj = JSON.parse(result);
                        var dates = [];
                        var money = [];

                        if (obj.length > 0) {
                            for (var i = 0; i < obj.length; i++) {
                                dates.push(obj[i].date);
                                money.push(obj[i].totalMoney);
                            }

                            var r = Raphael("chartHolder");
                            options.axisystep = 5;
                            options.stacked = false;
                            var data3 = [money];
                            var chart3 = r.barchart(200, 220, 620, 120, data3, options).hover(function () {
                                this.flag = r.popup(this.bar.x, this.bar.y, this.bar.value).insertBefore(this);
                            }, function () {
                                this.flag.animate({opacity: 0}, 500, ">", function () {
                                    this.remove();
                                });
                            });
                            chart3.label([dates], true);
                        }
                    })


                });
            </script>

            <span style="display: block;text-align: center;font-size: 20px">销售额统计</span>
            <div id="chartHolder">

            </div>

            <script type="text/javascript">

                var options = {
                    stacked: false,
                    gutter: 20,
                    axis: "0 0 1 1", // Where to put the labels (trbl)
                    axisystep: 10 // How many x interval labels to render (axisystep does the same for the y axis)
                };

                $(function () {


                    var url = "${ctx}/statistic/statistic!peopleData.action";


                    $.get(url, function (result) {
                        var obj = JSON.parse(result);
                        var dates = [];
                        var nums = [];

                        if (obj.length > 0) {
                            for (var i = 0; i < obj.length; i++) {
                                dates.push(obj[i].date);
                                nums.push(obj[i].num);
                            }

                            var r = Raphael("chartHolder1");
                            options.axisystep = 5;
                            options.stacked = false;
                            var data3 = [nums];
                            var chart3 = r.barchart(200, 220, 620, 120, data3, options).hover(function () {
                                this.flag = r.popup(this.bar.x, this.bar.y, this.bar.value).insertBefore(this);
                            }, function () {
                                this.flag.animate({opacity: 0}, 500, ">", function () {
                                    this.remove();
                                });
                            });
                            chart3.label([dates], true);
                        }
                    })


                });
            </script>

            <span style="display: block;text-align: center;font-size: 20px">客流分析</span>
            <div id="chartHolder1"></div>
        </div>

    </div>

</div>
